import React, {useCallback, useState} from 'react'
import {Form, Input, Select, Switch} from 'antd'
import {getGroups} from "../../../api/groups";

const {Option} = Select
const UserInfoForm = function (props) {
	const {getFieldDecorator} = props.form
	const [isEdit, setIsEdit] = useState(false)
	const [groups, setGroups] = useState(() => {
		getGroups({}).then((res) => {
			setGroups(res.results)
		})
	})
	const formItems = [
		{
			label: '姓名',
			key: 'name',
			options: {
				rules: [
					{
						required: true,
						message: '请输入姓名！'
					}
				],
				initialValue: ''

			},
			type: <Input/>
		},
		{
			label: '登录账号',
			key: 'username',
			options: {
				rules: [
					{
						required: true,
						message: '请输入账号！'
					}
				],
				initialValue: ''

			},
			type: <Input disabled={isEdit}/>//编辑情况下，账号不可修改
		},
		{
			label: '性别',
			key: 'gender',
			options: {
				initialValue: 'male'
			},
			type: (
				<Select>
					<Option value='male'>男</Option>
					<Option value='female'>女</Option>
				</Select>
			)
		},
		{
			label: '地址',
			key: 'address',
			options: {
				initialValue: ''
			},
			type: <Input/>
		},
		{
			label: '身份证号',
			key: 'id_number',
			options: {
				initialValue: ''
			},
			type: <Input/>
		},
		{
			label: '座机',
			key: 'landline_number',
			options: {
				initialValue: ''
			},
			type: <Input/>
		},
		{
			label: '电话',
			key: 'telephone_number',
			options: {
				initialValue: ''
			},
			type: <Input/>
		},
		{
			label: '微信',
			key: 'wechat_id',
			options: {
				initialValue: ''
			},
			type: <Input/>
		},
		{
			label: '邮箱',
			key: 'email',
			options: {
				initialValue: ''
			},
			type: <Input/>
		},
		{
			label: '是否激活',
			key: 'is_active',
			options: {
				valuePropName: 'checked',
				initialValue: true
			},
			type: <Switch/>
		},
		{
			label: '岗位',
			key: 'groups',
			options: {
				rules: [
					{
						required: true,
						message: '请选择岗位！'
					}
				],
			},

			type: (
				<Select>
					{
						groups?.map((item, index) => {
							return <Option key={index} value={item.url}>{item.name}</Option>
						})
					}
				</Select>
			)
		}

	]
	const formItemLayout = {
		labelCol: {
			xs: {span: 24},
			sm: {span: 4},
		},
		wrapperCol: {
			xs: {span: 24},
			sm: {span: 20},
		},
	}
	const formOperations = useCallback(
		() => {
			return {
				getFormValue: () => {
					let value = props.form.getFieldsValue()
					return {value, isEdit}
				},
				initFormValue: (formValue) => {
					console.log(formValue);
					setIsEdit(true)
					props.form.setFieldsValue({
						...formValue,
						groups: formValue.groups[0],
					})
				},
				validateFields: () => {
					let canPost = false
					props.form.validateFields((errors, values) => {
						console.log(errors);
						if (errors === null) {
							canPost = true
						}
					})
					return canPost
				}
			}
		},
		[props.form],
	)

	// console.log(123, props.onRef)
	props.onRef(formOperations)
	return (
		<Form {...formItemLayout}>
			{
				formItems.map(item => {
					let {label, key, options, type} = item
					return (
						<Form.Item label={label} key={key}>
							{
								getFieldDecorator(key, options)(type)
							}
						</Form.Item>
					)
				})
			}
		</Form>
	)
}

const UserEditPopup = Form.create()(UserInfoForm);


export default UserEditPopup



